<template>
  <NuxtLayout name="sign">
    <div class="sign-wrapper">
      <h2 class="site-name">WATT权限管理系统</h2>
      <div class="title-tab">
        <span class="active">密码登录</span>
        <span @click.stop="goLink">验证码登录</span>
      </div>

      <a-form ref="formRef" :model="form" :rules="rules" class="login-form" layout="vertical" @keydown.enter="handleSubmit">
        <div>
          <a-form-item label="用户名" name="username">
            <a-input v-model:value="form.username" size="large" allowClear placeholder="用户名">
              <template #prefix>
                <user-outlined class="pre-icon" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input v-model:value="form.password" :type="form.pwInputType" size="large" allowClear placeholder="密码">
              <template #prefix>
                <lock-outlined class="pre-icon" />
              </template>
              <template #suffix>
                <eye-invisible-outlined v-if="form.pwInputType === 'password'" class="pre-icon" @click.stop="form.pwInputType = 'text'" />
                <eye-outlined v-else class="pre-icon" @click.stop="form.pwInputType = 'password'" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="验证码" name="code">
            <a-row :gutter="10">
              <a-col :span="15">
                <a-input v-model:value="form.code" allowClear size="large" placeholder="验证码">
                  <template #prefix>
                    <safety-outlined class="pre-icon" />
                  </template>
                </a-input>
              </a-col>
              <a-col :span="9">
                <captcha ref="captRef" :scene="form.scene" />
              </a-col>
            </a-row>
          </a-form-item>
        </div>

        <a-form-item class="login-form-btn">
          <a-button type="primary" block :loading="loading" @click="handleSubmit"> 登录 </a-button>
          <div class="tip"><span>还没有账号？</span><span class="link" @click.stop="goReg">去注册</span></div>
        </a-form-item>
      </a-form>
    </div>
  </NuxtLayout>
</template>
<script setup>
import { ref, watch, reactive } from 'vue'
import { Cookie } from '@wattjs/network'
import Captcha from '../components/common/captcha.vue'

import { baseURL as publicPath } from '../api/config'
import { userLogin } from '../api/user.model'

const route = useRoute()
const loading = ref(false)
const formRef = ref()

console.log(route.path, 'route')
const form = reactive({
  pwInputType: 'password',
  username: 'cabber', // '',
  password: '123123', // '',
  code: '',
  scene: 'login'
})
const rules = reactive({
  username: [{
              required: true,
              min: 2,
              max: 25,
              pattern: '^[0-9a-zA-Z]+[_]*[0-9a-zA-Z]+$',
              message: '账号为2-25个字母、数字、下划线组合字符'
            }],
  password: [{
              required: true,
              min: 6,
              max: 20,
              pattern: '^[0-9a-zA-Z]+[_]*[0-9a-zA-Z]+$',
              message: '密码为6-20个字母、数字、下划线组合字符'
            }],
  code: [{
          required: true,
          min: 4,
          max: 4,
          pattern: '[0-9a-zA-Z]{4}',
          message: '请正确输入验证码'
        }]
})

const handleSubmit = () => {
  if (loading.value) return
  formRef.value
    .validate()
    .then(() => {
      loading.value = true
      userLogin.send({
        scene: form.scene,
        code: form.code,
        username: form.username,
        password: form.password
      }).then(async (res) => {
        loading.value = false
        const { uid, nickname, token, tokenExpired } = res
        const baseURL = process.client ? window.location.hostname : ''
        console.log(res, baseURL)
        Cookie.set('op_id', uid, { expires: new Date(tokenExpired), domain: baseURL })
        Cookie.set('op_name', nickname, { expires: new Date(tokenExpired), domain: baseURL })
        Cookie.set('token', token, { expires: new Date(tokenExpired), domain: baseURL })
        // router.push('/')
        await navigateTo(`${publicPath}`, { external: true })
      }).catch(() => {
        loading.value = false
      })
    })
}

const goLink = async () => {
  await navigateTo(`${publicPath.replace(/\/$/, '')}/signin`, { external: true })
}

const goReg = async () => {
  await navigateTo(`${publicPath.replace(/\/$/, '')}/register`, { external: true })
}
</script>
<style lang="less" scoped>
@import "../assets/less/sign.less";
</style>
